<template id="one-form">
    <div :class="" :loading="loading" element-loading-text="拼命加载中">
        <!-- 表格功能列  -->
        <header-menu flex="main:justify" ref="headerMenu" style="margin-bottom: 10px;">
            <template slot="menuLeft">
                <slot name="menuLeft"></slot>
            </template>
            <template slot="menuRight">
                <slot name="menuRight"></slot>
                <el-button icon="el-icon-refresh-right" circle :size="config.size || 'mini'" @click="resetField">
                </el-button>
            </template>
        </header-menu>
        <el-divider></el-divider>
        <el-form status-icon :model="value" ref="ruleForm" :label-width="config.labelWidth || '100px'">
            <el-row :gutter="10" v-for="(row, i) in columns" :key="i">
                <el-col :span="24 / rowSize" v-for="(x, idx) in row" :key="idx">
                    <el-form-item :label="x.label" :prop="x.prop" :size="config.size || 'small'" :rules="x.rules"
                        :ref="x.prop">
                        <template slot='label' v-if="x.content">
                            <span>{{x.label}}</span>
                            <el-tooltip v-if="x.content" placement="top">
                                <div slot="content" v-html="unEscapeHTML(x.content)"></div>
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </template>
                        <slot v-if="x.slot" :name="x.prop" :row="x" :index="i"></slot>
                        <slot v-if="x.type == 'image'" :name="'image'" :row="x" :index="i"></slot>
                        <el-input v-if="x.type == 'input'" :value="val[x.prop]" v-bind="x.bind || []"
                            @input="setChaVal(x, $event)"></el-input>
                        <el-input :rows="5" v-if="x.type === 'textarea'" type="textarea" :value="val[x.prop]"
                            v-bind="x.bind || []" @input="setChaVal(x, $event)"></el-input>
                        <el-select v-if="x.type=='select'" :value="val[x.prop]" v-bind="x.bind || []"
                            @input="setChaVal(x, $event)">
                            <el-option v-for="opt in x.options" :key="opt.value" :value="opt.value" :label="opt.label">{{opt.label}}
                            </el-option>
                        </el-select>
                        <el-cascader v-if="x.type=='cascader'" :value="val[x.prop]" v-bind="x.bind || []"
                            @input="setChaVal(x, $event)"></el-cascader>
                        <el-radio-group v-if="x.type=='radio'" :value="val[x.prop]" v-bind="x.bind || []"
                            @input="setChaVal(x, $event)">
                            <el-radio v-for="opt in x.options" :key="opt.value" :label="opt.value">{{opt.label}}
                            </el-radio>
                        </el-radio-group>
                        <el-checkbox-group v-if="x.type=='checkbox'" :value="val[x.prop] "  v-bind="x.bind || []"
                            @input="setChaVal(x, $event)">
                            {{x.options}}
                            <el-checkbox v-for="opt in x.options" :key="opt.value" :label="opt.value">{{opt.label}}
                            </el-checkbox>
                        </el-checkbox-group>
                        <el-time-select v-if="x.type=='time'" :value="val[x.prop] || []" v-bind="x.bind || []"
                            @input="setChaVal(x, $event)"></el-time-select>
                        <el-date-picker
                            v-if="['year', 'month', 'date', 'dates', 'week', 'datetime', 'datetimerang', 'daterange', 'monthrange'].includes(x.type)"
                            :type="x.type" :value="val[x.prop]" v-bind="x.bind || []" @input="setChaVal(x, $event)">
                        </el-date-picker>
                        <el-switch v-if="x.type=='switch'" :value="s2i(val[x.prop])" :active-value="1" :inactive-value="0"
                            v-bind="x.bind || []" @input="setChaVal(x, $event)"></el-switch>
                        <template v-if="x.type=='btns'">
                            <el-button v-for="(btn, index) in x.btns" :key="index" v-html="btn.label"
                                v-bind="bindConfig(btn)" @click="btn.fn"></el-button>
                        </template>
                        <slot name="form-item-end" :row="x" :index="i"></slot>
                    </el-form-item>
                </el-col>
            </el-row>
    </div>
</template>
<script>
"use strict";function isJSON(t){if("string"==typeof t)try{var e=JSON.parse(t);return!("object"!=(void 0===e?"undefined":_typeof(e))||!e)}catch(t){return!1}}var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};Vue.component("one-form",{template:"#one-form",props:{loading:{type:Boolean},value:{type:null},config:{type:Object,required:!0},rootVal:{type:null},parentVal:{type:null}},data:function(){return{init:!0}},created:function(){},mounted:function(){},computed:{val:function(){if(this.init){this.init=!1;var t=this.initVal();return this.$emit("input",t),t}return this.value},columns:function(){var t=this.config||{},e=t.formdesc,n=void 0===e?[]:e,o=t.rowSize,r=void 0===o?1:o;return this.chunk(n,r)},rowSize:function(){return this.config.rowSize||1},_rootVal:function(){return this.rootVal?this.rootVal:this.val},_parentVal:function(){return this.parentVal?this.parentVal:this.val}},methods:{s2i:function(t){return parseInt(t)},initVal:function(){var t=this,e=this.config.formdesc,n={};e.forEach(function(e){n[e.prop]=t.getValByType(e)});var o={};return"object"==_typeof(this.value)&&(o=this.value),o=Object.assign(n,o)},getValByType:function(t){if(""!=t.value){var e=t.value;return isJSON(e)&&(e=JSON.parse(e)),e}if("checkbox"==t.type||"select"==t.type&&t.multiple)return[];if("select"==t.type&&t.must&&!t.multiple||"radio"==t.type&&t.must){for(var n=0;n<t.options.length;n++)if(!t.options[n].disabled)return t.options[n].value;return""}return""},chunk:function(t,e){if(!t.length||e<1)return[];var n=[];return t.forEach(function(t,o){var r=Math.floor(o/e);n[r]instanceof Array||(n[r]=[]),n[r].push(t)}),n},setChaVal:function(t,e){var n=Object.assign({},this.val);n[t.prop]=e,this.$emit("input",n)},resetField:function(){this.$refs.ruleForm.resetFields()}}});
</script>
<style>
    .el-divider--horizontal {
        margin: 10px 0;
    }

    .el-date-picker__editor-wrap .el-input {
        width: 100% !important
    }
</style>